
var colorUtil = require('./utils/colorUtil')

// components/full-color-picker/full-color-picker.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    offsetX: {
      type: Number,
      value: 0
    },
    barHeight: {
      type: Number,
      value: 25
    },
    detailDisplayBlackRatio: {
      type: Number,
      value: 0.7 // 0 - 1
    },
    detailOffsetX: {
      type: Number,
      value: 0
    },
    detailOffsetY: {
      type: Number,
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    wxsProps: {},
    spread: true,
    detailColor: '#ff0000',
    hue: 0,
    width: 0,
    height: 0,
  },

  lifetimes: {
    ready: function () {
      this.createSelectorQuery().select('.full_color_picker_container').boundingClientRect().exec(e => {
        const bound = e[0]
        const {
          width
        } = bound
        const props = {
          width,
          height: width
        }
        this.setData({
          wxsProps: {
            ...props,
            height: width * this.data.detailDisplayBlackRatio,
            offsetX: this.data.detailOffsetX,
            offsetY: this.data.detailOffsetY
          },
          ...props
        })
      })
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeSpread: function () {
      this.setData({
        spread: !this.data.spread
      })
    },
    changeDetailColor: function (e) {
      const {
        hexColor,
        hue
      } = e.detail
      this.setData({
        detailColor: hexColor,
        hue
      })
    },
    trigger: function(eventName) {
      this.triggerEvent(eventName, {
        eventName,
        hexColor: this.hex,
        rgbColor: this.afterRgb
      }, { bubbles: true, composed: true })
    },
    __test: function (obj) {
      const {
        offsetX,
        offsetY,
        touchType
      } = obj
      let eventName = 'pickingend'
      if (touchType === 'touchend') {
        this.trigger(eventName)
        return
      }
      const {
        width,
        height,
        hue
      } = this.data
      console.log(hue)
      
      this.afterRgb = colorUtil.HSVtoRGB(hue, offsetX / width, 1 - offsetY / height)
      this.hex = colorUtil.colorHex(this.afterRgb)
      if (touchType === 'touchstart') {
        eventName = 'pickingstart'
      } else if (touchType === 'touchmove') {
        eventName = 'picking'
      }
      this.trigger(eventName)
    }
  }
})
